<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<em class="ddp-bg-back"></em>
<div class="ddp-ui-contents-in ddp-scroll">
  <!-- top -->
  <div class="ddp-ui-contents-top">
    <div class="ddp-ui-title">
      {{'msg.comm.menu.manage.prep' | translate}}
    </div>

    <!-- tab -->
    <ul class="ddp-list-top-tab">
      <li><a [routerLink]="['/management/datapreparation/dataset']">{{'msg.comm.menu.manage.prep.set' | translate}}</a></li>
      <li><a [routerLink]="['/management/datapreparation/dataflow']">{{'msg.comm.menu.manage.prep.flow' | translate}}</a></li>
      <li class="ddp-selected"><a [routerLink]="['/management/datapreparation/datasnapshot']">{{'msg.comm.menu.manage.prep.snapshot' | translate}}</a></li>
    </ul>
    <!-- //tab -->

  </div>
  <!-- //top -->
  <div class="ddp-ui-contents-list">
    <!-- option -->
    <div class="ddp-filter-option">
      <div class="ddp-ui-option ddp-clear">


        <div class="ddp-wrap-edit">
          <label class="ddp-label-type">{{'msg.dp.th.ss-type' | translate}}</label>
          <!-- edit option -->
          <div class="ddp-ui-edit-option">
            <!-- selectbox -->
            <!-- 선택시 : ddp-selected 추가 -->
            <component-select
              [array]="snapshotTypes"
              [viewKey]="'label'"
              (onSelected)="onChangeType($event)">
            </component-select>
            <!-- //selectbox -->
          </div>
          <!-- //edit option -->
        </div>



        <div class="ddp-wrap-edit">
          <label class="ddp-label-type">{{'msg.dp.th.status' | translate}}</label>
          <!-- edit option -->
          <div class="ddp-ui-edit-option ddp-inline">
            <label class="ddp-label-radio ddp-inline" (change)="onChangeStatus('all')">
              <input type="radio" name="datasetRadio" [checked]="ssStatus === 'all'" >
              <i class="ddp-icon-radio "></i>
              <span class="ddp-txt-radio">{{'msg.comm.ui.list.all' | translate}}</span>
            </label>
            <label class="ddp-label-radio ddp-inline" (change)="onChangeStatus('success')">
              <input type="radio" name="datasetRadio" [checked]="ssStatus === 'success'">
              <i class="ddp-icon-radio "></i>
              <span class="ddp-txt-radio">{{'msg.dp.ui.success' | translate}}</span>
            </label>
            <label class="ddp-label-radio ddp-inline" (change)="onChangeStatus('fail')">
              <input type="radio" name="datasetRadio" [checked]="ssStatus === 'fail'">
              <i class="ddp-icon-radio "></i>
              <span class="ddp-txt-radio">{{'msg.dp.ui.fail' | translate}}</span>
            </label>
            <label class="ddp-label-radio ddp-inline" (change)="onChangeStatus('preparing')">
              <input type="radio" name="datasetRadio" [checked]="ssStatus==='preparing'">
              <i class="ddp-icon-radio "></i>
              <span class="ddp-txt-radio">{{'msg.dp.ui.preparing' | translate}}</span>
            </label>

          </div>
          <!-- //edit option -->
        </div>
      </div>
      <div class="ddp-ui-option ddp-optiontype ddp-clear">
        <!-- 검색 -->
        <div class="ddp-form-search ddp-fleft">
          <em class="ddp-icon-search"></em>
          <input type="text" placeholder="{{'msg.dp.ui.ss.search.description' | translate}}" [(ngModel)]="searchText" (keypress)="onSearchInputKeyPress($event);">
          <em class="ddp-btn-search-close" *ngIf="searchText" (click)="searchText = ''; reloadPage();"></em>
        </div>
        <!-- //검색 -->

        <div class="ddp-ui-rightoption">
          <span class="ddp-data-total ddp-only">{{'msg.log.ui.num.lists' | translate : { value : pageResult.totalElements} }}</span>
        </div>
      </div>
    </div>
    <!-- //option -->

    <table class="ddp-table-form ddp-table-type3" *ngIf="datasnapshots.length > 0">
      <colgroup>
        <col width="45px">
        <col width="*">
        <col width="25%">
        <col width="10%">
        <col width="10%">
        <col width="15%">
      </colgroup>
      <thead>
      <tr>
        <th (click)="changeOrder('ssName')" class="ddp-cursor" colspan="2">
          {{'msg.comm.ui.name' | translate}}

          <em class="ddp-icon-array-default2" *ngIf="selectedContentSort.key !== 'ssName' || selectedContentSort.sort === 'default'"></em>
          <em class="ddp-icon-array-asc2" *ngIf="selectedContentSort.key === 'ssName' && selectedContentSort.sort === 'asc'"></em>
          <em class="ddp-icon-array-des2" *ngIf="selectedContentSort.key === 'ssName' && selectedContentSort.sort === 'desc'"></em>
        </th>
        <th>
          {{'msg.comm.menu.manage.prep.flow' | translate}} | {{'msg.comm.menu.manage.prep.set' | translate}}
        </th>
        <th>
          {{'msg.dp.th.status' | translate}}
        </th>
        <th>
          {{'msg.dp.th.et' | translate}}
        </th>
        <th (click)="changeOrder('createdTime')" class="ddp-cursor">
          {{'msg.comm.th.created' | translate}}
          <em class="ddp-icon-array-default2" *ngIf="selectedContentSort.key !== 'createdTime' || selectedContentSort.sort === 'default'"></em>
          <em class="ddp-icon-array-asc2" *ngIf="selectedContentSort.key === 'createdTime' && selectedContentSort.sort === 'asc'"></em>
          <em class="ddp-icon-array-des2" *ngIf="selectedContentSort.key === 'createdTime' && selectedContentSort.sort === 'desc'"></em>
        </th>

      </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of datasnapshots; let i = index" [attr.data-index]="i" (click)="snapshotDetail(item)" >
          <td>
            <svg-icon-component [name]="getSvgName(item)" [isBlackAndWhite]="true"></svg-icon-component>
          </td>
          <td >
            <div class="ddp-wrap-long">
              <div class="ddp-txt-long" title="{{item.ssName}}">
                {{item.ssName}}
              </div>
            </div>
          </td>
          <td>
            <span *ngIf="item.dsName === ''" class="ddp-data-delete">{{'msg.dp.ui.ds.del.success' | translate}}</span>
            <div class="ddp-txt-long" title="{{item.dfName}} | {{item.dsName}}">
              {{item.dfName}} | {{item.dsName}}
            </div>

          </td>
          <td>
            <em class="ddp-icon-status-success" *ngIf="item.displayStatus === 'SUCCESS'"></em>
            <em class="ddp-icon-status-error" *ngIf="item.displayStatus === 'FAIL'"></em>
            <em class="ddp-icon-status-inprogress" *ngIf="item.displayStatus === 'PREPARING'"></em>
          </td>
          <td>
            <span *ngIf="getElapsedDay(item) > 0">{{getElapsedDay(item) + '일'}}</span>
            {{getElapsedTime(item)}}
          </td>
          <td class="ddp-data-last">
            <div class="ddp-txt-long" title="{{item.launchTime | mdate:'YYYY-MM-DD HH:mm'}} by {{item.createdBy.fullName}}">
              {{item.launchTime | mdate:'YYYY-MM-DD HH:mm'}} <em class="ddp-icon-by">{{'msg.dp.ui.by' | translate}}</em>{{item.createdBy.fullName}}
            </div>
            <div class="ddp-btn-control">
              <em class="ddp-icon-control-cut" (click)="confirmDelete($event, item)"></em>
            </div>
          </td>
        </tr>
      </tbody>

    </table>
    <!-- 더보기 -->

    <!-- 데이터 없음 -->
    <div class="ddp-data-source-none" *ngIf="datasnapshots.length === 0; else yesSs">
      {{'msg.dp.ui.no.ss.description' | translate}}
    </div>
    <!-- //데이터 없음 -->

    <ng-template #yesSs>
      <component-pagination [info]="pageResult" (changePageData)="changePage($event)"></component-pagination>
    </ng-template>
    <!-- //더보기 -->
  </div>
</div>

<app-delete-modal (deleteConfirm)="deleteDataSnapshot()" [enableCloseOutput]="true" (closeOutput)="closeDetail()"></app-delete-modal>
<app-data-snapshot-detail (snapshotDetailCloseEvent)="closeDetail()"></app-data-snapshot-detail>
